<template>
  <el-table header-row-class-name="table_header_title" class="configure-table-box" :data="tableData">
    <el-table-column prop="name" label="属性名"></el-table-column>
    <el-table-column prop="typeName" label="格式"></el-table-column>
    <el-table-column label="选项内容">
      <template #default="scope">
        {{ scope.row.attr_val_name || '--' }}
      </template>
    </el-table-column>
    <el-table-column prop="order" label="排序"></el-table-column>
    <el-table-column label="状态">
      <template #default="scope">
        {{ scope.row.is_enable ? '已开启' : '未开启' }}
      </template>
    </el-table-column>
    <el-table-column label="类型">
      <template #default="scope">
        {{ scope.row.is_system ? '系统' : '自定义' }}
      </template>
    </el-table-column>
    <el-table-column label="必填">
      <template #default="scope">
        {{ scope.row.is_required == 1 ? '否' : '是' }}
      </template>
    </el-table-column>
    <el-table-column prop="created_name" label="创建人"></el-table-column>
    <el-table-column label="操作" width="300px">
      <template #default="scope">
        <div class="btn" v-if="scope.row.system_code != 'mobile'" @click="openOrClose(scope.row)" v-auth="'CUSTOMER_PROP_OPEN_CLOSE'">{{ !scope.row.is_enable ? '开启' : '关闭' }}</div>
        <div v-if="!scope.row.is_system" class="btn" @click="edit(scope.row)" v-auth="'CUSTOMER_PROP_EDIT'">编辑</div>
        <div class="btn" v-if="!scope.row.is_system" @click="del(scope.row)" v-auth="'CUSTOMER_PROP_DEL'">删除</div>
      </template>
    </el-table-column>
    <template #empty>
      <img class="emty_img" src="@/assets/noData.png" alt="" />
      <div class="emty_title">暂无数据</div>
    </template>
  </el-table>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import { updateStatus, delAttr } from '../api'
  const emit = defineEmits(['edit', 'refresh'])
  let props = defineProps(['tableData'])
  let tableList = ref(JSON.parse(JSON.stringify(props.tableData)))
  let canClick = true
  watch(
    () => props.tableData,
    (val: any) => {
      canClick = true
      tableList = ref(JSON.parse(JSON.stringify(val)))
    }
  )
  // 开启或关闭
  const openOrClose = (item: object) => {
    if (canClick) {
      canClick = false
      updateStatus({ attr_id: item.id, is_enable: item.is_enable ? 0 : 1 })
        .then((r: object) => {
          emit('refresh')
          canClick = true
        })
        .catch((e: object) => {
          canClick = true
        })
    }
  }

  // 编辑
  const edit = (item: object, index: number) => {
    emit('edit', item, '编辑客户属性')
  }

  // 删除
  const del = (item: any) => {
    ElMessageBox.confirm(`您正在删除客户的【${item.name}】的属性，确定之后，客户的该属性将会被删除，请慎重！`, '温馨提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      delAttr({ attr_id: item.id }).then((r: object) => {
        ElMessage.success('删除成功')
        emit('refresh')
      })
    })
  }
</script>

<style lang="scss" scoped>
  .configure-table-box {
    border: 1px solid #eaeaea;
    .btn {
      width: 80px;
      height: 24px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #eaeaea;
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #33302d;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
</style>

<style lang="scss">
  .table_header_title {
    height: 60px;
    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
    }
  }
</style>
